<template>
	<el-pagination 
		@size-change="onSizeChange"
		@current-change="onCurrentChange"
		:current-page="pageIndex"
		:page-sizes="pageSizes"
		:page-size="rows"
		:layout="type"
		:total="total">
	</el-pagination>
</template>
<script>
	export default {
		props:{
			type:String,
			pageSizes:{type:Array,default:()=> {return [10,20,30,40,50]}},
			rows:{type:Number, default:10},
			setPage:{type:Function} //回调，函数参数pageIndex,row和设置结果的回调函数，置结果的回调函数的参数是对象属性Records和RecordCount
		},
		watch:{
			rows(){
				this.currentRows=this.rows;
			}
		},
		data(){
			return {
				currentRows:this.rows,
				pageIndex:1,
				total:0,
			}
		},
		methods:{
			onSizeChange(rows){
				this.currentRows = rows;
				this.getList(1);
			},
			onCurrentChange(pageIndex){
                // console.log(pageIndex)
				this.getList(pageIndex);
			},
			setResultCallback(records,recordCount){
				if(records.length==0 && this.pageIndex>1)
					this.getList(this.pageIndex-1);
				else
					this.total=recordCount;
			},
			getList(pageIndex){
				if(this.setPage){
					this.pageIndex = pageIndex;
					this.setPage(pageIndex,this.currentRows,this.setResultCallback);	
					// window.scrollTo(0,0);			
				}
			},
			refresh(){
				this.getList(this.pageIndex);
			}
		}
	}
</script>